<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background}">
		<view @click="jumpSearch()">
			<search :disabled="true" @change="e=>{key=e}"></search>
		</view>
		<view :style="{'height':scroll_height+'px'}" class="box">
			<view class="item">
				<view class="tag" @click="jump('男')" style="color: #409EFF;">
					<view style="font-size: 50rpx;" class="icon-nansheng iconfont"></view>
					<!-- 男生书单 -->
				</view>
			</view>
			<view class="item">
				<view class="tag" @click="jump('女')" style="color: #F56C6C;">
					<view style="font-size: 50rpx;" class="icon-nvsheng iconfont"></view>
					<!-- 女生书单 -->
				</view>
			</view>
			<view class="item">
				<view class="tag" @click="jumpRank()" style="color: #E6A23C;">
					<view style="font-size: 50rpx;" class="icon-shuju iconfont"></view>
					<!-- 排行榜 -->
				</view>
			</view>
			<view class="item">
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	import search from '../../components/search.vue'
	import {
		getBookList
	} from '../../api/index.js'
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		components: {
			search
		},
		data() {
			return {
				key: null
			};
		},
		created() {
			this.scroll_height = getApp().globalData.screenHeight - 86 - 2 * parseInt(this.RpxToPx(21)) - getApp()
				.globalData.statusBarHeight
		},
		mounted() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			jumpRank() {
				uni.navigateTo({
					url: '../rank/rank'
				})
			},
			jump(e) {
				uni.navigateTo({
					url: "../BookList/index?sex=" + e
				})
			},
			jumpSearch() {
				uni.navigateTo({
					url: "../search/search",
					fail(r) {
						console.log(r);
					}
				})
			},
			PxToRpx(num) {
				return PxToRpx(num)
			},
			RpxToPx(num) {
				return RpxToPx(num)
			}
		}
	}
</script>

<style lang="less">
	.container.dark {}

	.container {
		background: var(--background);

		.box {
			display: flex;

			.item {
				width: 25%;
				height: calc(100vw / 4);
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--color-main);
				transition: all .4s;

				.tag {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 14vw;
					height: 14vw;
					border-radius: 20rpx;
					background-color: var(--background) !important;
					box-shadow: 10rpx 10rpx 15rpx var(--color1),
						-10rpx -10rpx 15rpx var(--color2);

					.iconfont {
						transition: all .4s;
						font-size: 60rpx !important;
					}
				}

				.tag:active {
					background-color: var(--background) !important;
					box-shadow: inset 10rpx 10rpx 15rpx var(--color1),
						inset -10rpx -10rpx 15rpx var(--color2);

					.iconfont {
						font-size: 56rpx !important;
					}
				}
			}
		}
	}
</style>
